<template>
  <div class="box5">
    <i class="bor-top-l"></i>
    <i class="bor-btm-l"></i>
    <i class="bor-top-r"></i>
    <i class="bor-btm-r"></i>
    <div class="k-main">
      <h1>
        <span>{{title}}</span>
      </h1>
      <slot name="center"></slot>
    </div>
  </div>
</template>

<script>
export default {
    props: {
      title: {
        type: String,
        default: '边框标题'
      }
    },
    data() {
      return {

      }
    }
}
</script>

<style lang="less" scoped>
.box5{position: relative; display: inline-block; overflow: hidden; padding: 19px 16px 16px 16px; width: 100%; height: 100%;}
.box5 .bor-top-l{background: url(~@/assets/images/borderBox/box5/border-top.png) no-repeat top left;width:calc(100% - 16px);height:19px ;position: absolute;top: 0px;left: 0px;}
.box5 .bor-btm-l{background: url(~@/assets/images/borderBox/box5/border-l.png) no-repeat bottom left; width:16px;height: calc(100% - 19px);position: absolute;bottom: 0px; left: 0px;}
.box5 .bor-top-r{background: url(~@/assets/images/borderBox/box5/border-right.png) no-repeat top right; width: 16px;height:calc(100% - 16px);position: absolute;top: 0px; right: 0px;}
.box5 .bor-btm-r{background: url(~@/assets/images/borderBox/box5/border-bottom.png) no-repeat bottom right;height:19px;width:calc(100% - 16px);position: absolute;bottom: -0px;right:0px ;}
.box5 .k-main{ background: rgba(0,34,110,0.8); top: 0px; position: relative; height: 100%; width: auto;}
.box5 .k-main>h1{height: 40px; line-height: 40px; position: relative; left: -17px; top: -15px; width: calc(100% + 22px);}
.box5 .k-main>h1 span{line-height: 45px; padding: 0px; padding-left: 15px; font-size: 16px; }
.box5 .k-main h1{height:45px ;width: 100%;background: url(~@/assets/images/borderBox/box5/title_bg.png) no-repeat bottom left;font-size:18px ;margin-left: 6px; margin-top: 0; margin-bottom: 0}
.box5:before{content: ''; height:10px ; width: 137px; position: absolute; display: block; top: 0px; left: -1px; background: url(~@/assets/images/borderBox/box5/guang_a1.png) no-repeat;animation: moves_w 2s linear infinite ;}
.box5:after{content: ''; width:10px ; height: 137px; position: absolute; display: block; top: 0px; left: -1px; background: url(~@/assets/images/borderBox/box5/guang_a2.png) no-repeat;animation: moves_h 2s linear infinite ;}
@keyframes moves_w{
  0%{left: -50px; opacity: 0;}
  10%{ opacity: 1;}
  40%{opacity: 1;}
  50%{left: calc(100% - 100px);opacity: 0;}
  100%{left: calc(100% - 100px);opacity: 0;}
}
@keyframes moves_h{
  0%{top: -50px; opacity: 0;}
  10%{ opacity: 0.8;}
  40%{opacity: 0.8;}
  50%{top: calc(100% - 100px);opacity: 0;}
  100%{top: calc(100% - 100px);opacity: 0;}
}
</style>